<template>
	<view class="receive">
		<view class="title">
			<text>领取</text>
			<view class="close" @click="close">
				<image src="@/static/images/close.png"></image>
			</view>
		</view>
		<scroll-view scroll-y class="scroll_view">
			<view class="list">
				<view class="item" v-for="(item,index) in list">
					<view class="key">{{item.name}}</view>
					<view class="btn" v-if="item.can_receive==0">未达标</view>
					<view class="btn" v-else-if="item.can_receive==1&&item.is_receive==0" @click="submit(item)">立即领取
					</view>
					<view class="btn" v-else>已领取</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		supremeBouns,
		supremeBounsReceive
	} from "@/request/api";
	import {
		ref
	} from "vue";
	const props = defineProps({
		id: [Number, String]
	});
	const list = ref([]);
	const getList = async () => {
		let {
			bouns
		} = await supremeBouns({
			id: props.id
		});
		list.value = bouns;
	};
	getList();
	const submit = async (item) => {
		await supremeBounsReceive({
			id: props.id,
			supreme_bouns_id: item.id
		});
		uni.$uv.toast("操作成功");
		item.is_receive = 1;
	};
	const emit = defineEmits(["close"]);
	const close = () => emit('close');
</script>

<style scoped lang="scss">
	.receive {
		max-height: 80vh;
		width: 690rpx;
		border-radius: 20rpx;
		padding: 30rpx 0;
		box-sizing: border-box;
		background: #FFFFFF;
		overflow: hidden;

		.title {
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			color: #222222;
			font-size: 36rpx;
			font-weight: bold;
			box-sizing: border-box;
			position: relative;

			.close {
				position: absolute;
				right: 25rpx;
				top: 50%;
				transform: translateY(-50%);
				z-index: 2;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.scroll_view {
			height: calc(80vh - 174rpx);

			.list {
				padding: 0 30rpx;
				box-sizing: border-box;

				.item {
					height: 100rpx;
					border-bottom: 1px solid #EEEEEE;
					padding-left: 30rpx;
					padding-right: 12rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.key {
						color: #222222;
						font-size: 28rpx;
					}

					.btn {
						width: 120rpx;
						height: 52rpx;
						line-height: 52rpx;
						text-align: center;
						color: #FFFFFF;
						font-size: 24rpx;
						border-radius: 10rpx;
						margin-left: 34rpx;
						background: #A86E1E;
					}
				}
			}
		}
	}
</style>